iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 10
0
自我挑戰組

Kotlin Everyday:新手寫程式踩的坑系列 第 10

Day 10 ─用Kotlin RecycleView切換佈局 (上) getItemViewType

  • 分享至 

  • xImage
  •  

前兩天練習要怎麼做RecycleView資料和畫面設定,在呈現上其實還有更多種方式,不只有ListView一種,還有像GridView甚至是瀑布流的形式,接下來就要來嘗試設定不同的佈局樣式、甚至是做佈局的切換。要做的事:

  • 設定會有三種佈局樣式,可以透過右上角的按鈕進行切換檢視
  • 依照圖片形狀區分,正方形圖片的文字背景會呈現黑底,也就是說要依據資料型態使用不同的view。

使用:getItemViewType

步驟一:新增itemView
不同的資料型態用不同的itemView,因為我要讓正方形圖片顯示出不一樣的效果,在layout新增一個xml檔,用來顯示正方形圖片,主要的差異為文字背景顏色不一樣。

之前都用LinearLayout去畫item樣式,但其實用constraintLayout會比較彈性。這次練習中,有兩種不同格式的圖片要顯示,但因為同樣都顯示在RecycleView裡面,我希望一筆筆資料的畫面大小一樣(如下圖所示),不能直接用wrap_content符合圖片。

constraintLayout圖片長寬設定有一項是 layout_constraintDimensionRatio,可以根據某一邊長去決定另一邊,這裡我們設定依據寬的長度去設定高度,寫成「h,1:1」意思是高度是由寬度依1:1比例決定

步驟二:修改及判斷資料型態
在data class裡面新增資料的屬性,預設是長方形,將圖片為正方形的資料改為false。

val isLandscape: Boolean = true

接著來到Adapter,先判斷資料該使用哪種itemview, 使用 getItemViewType 方法,用來獲取當前項Item(position參數)要用哪種類型的view佈局,這裡的view佈局類型就是指onCreateViewHolder的第二個參數,參考這裡

override fun getItemViewType(position: Int): Int {
    return if(itemList[position].isLandscape) 1 else 2
}   
    //當item是isLandscape指定使用view1,反之使用view2
    //1,2 指的是view類型

步驟三:修改 onCreateViewHolder
onCreateViewHolder是用來載入佈局,依照viewType創建不同資料的ViewHOlder:

  • 當viewType為1時回傳一般資料的itemView
  • 當viewType為2時回傳正方形圖片資料的itemView
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
    return when (viewType) {
        1->{
            val inflater = LayoutInflater.from(parent.context)
            val view = inflater.inflate(R.layout.item_landscape, parent, false)
            ViewHolder(view, viewType)      //一般資料的畫面
        }
        2->{
            val inflater = LayoutInflater.from(parent.context)
            val view = inflater.inflate(R.layout.item_portrait, parent, false)
            ViewHolder(view, viewType)     //資料圖片為正方形的畫面
        }
        else->{
            val inflater = LayoutInflater.from(parent.context)
            val view = inflater.inflate(R.layout.item_portrait, parent, false)
            ViewHolder(view, viewType)
        }
    }
}

步驟四:根據viewType,進行不同的資料綁定

  • viewType = 1 綁定itemView的xml元件
  • viewType = 2 綁定的是正方形圖片資料的xml元件
inner class ViewHolder(itemView: View,var viewType: Int) :
RecyclerView.ViewHolder(itemView) {
    var imageView : ImageView? = null
    var textView : TextView? = null

    fun bind(item: item) {
        when (viewType) {
            1 -> {
                imageView = itemView.findViewById(R.id.image_demo1)
                textView = itemView.findViewById(R.id.text_demo1)
            }
            2 -> {
                imageView = itemView.findViewById(R.id.iimage_demo2)
                textView = itemView.findViewById(R.id.text_demo2)
            }
        }
        imageView?.setImageResource(item.image)
        textView?.setText(item.text)
    }
}    

比較特別的是每筆資料依然是一張圖片和一串文字,只是樣式不一樣,綁定寫法其實可以簡化成下面這樣:

imageView = itemView.findViewById(R.id.image_view_pic)
textView = itemView.findViewById(R.id.text_view_pic_desc)

兩個itemView檔案的元件ID可以取一樣的名稱,反正在onCreateViewHolder時會去取該資料需要的itemView,再去綁定該itemView裡面的畫面元件,取一樣的ID並不衝突喔!

準備完不同資料的畫面設定,明天要來實作頁面切換功能喔~敬請期待~


上一篇
Day 9 ─用Kotlin RecycleView做一個ImageList (下)
下一篇
Day 11 ─用Kotlin RecycleView切換佈局 (下) layoutManager、menu item、vector
系列文
Kotlin Everyday:新手寫程式踩的坑30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言